<div class="tab-sensors">
    <div class="info">
        <p i18n="sensorsInfo">
            Keep in mind that using fast update periods and rendering multiple graphs at the same time
            is resource heavy and will burn your battery quicker if you use a laptop.<br />
            We recommend to only render graphs for sensors you are interested in while using reasonable update periods.
        </p>
        <div class="checkboxes">
            <label><input type="checkbox" name="gyro_on" class="first" />Gyroscope</label>
            <label><input type="checkbox" name="accel_on" />Accelerometer</label>
            <label><input type="checkbox" name="mag_on" />Magnetometer</label>
            <label><input type="checkbox" name="baro_on" />Barometer</label>
            <label><input type="checkbox" name="debug_on" />Debug</label>
        </div>
    </div>
    <div class="wrapper gyro">
        <div class="plot_control">
            <div class="title">Gyroscope - deg/s</div>
            <dl>
                <dt i18n="sensorsRefresh"></dt>
                <dd class="rate">
                    <select name="gyro_refresh_rate">
                        <option value="10">10 ms</option>
                        <option value="20">20 ms</option>
                        <option value="30">30 ms</option>
                        <option value="40">40 ms</option>
                        <option value="50" selected="selected">50 ms</option>
                        <option value="100">100 ms</option>
                        <option value="250">250 ms</option>
                        <option value="500">500 ms</option>
                        <option value="1000">1000 ms</option>
                    </select>
                </dd>
                <dt i18n="sensorsScale"></dt>
                <dd class="scale">
                    <select name="gyro_scale">
                        <option value="100">100</option>
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="2000" selected="selected">2000</option>
                    </select>
                </dd>
                <dt>X:</dt><dd class="x">0</dd>
                <dt>Y:</dt><dd class="y">0</dd>
                <dt>Z:</dt><dd class="z">0</dd>
            </dl>
        </div>
        <svg id="gyro">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
        <div class="clear-both"></div>
    </div>
    <div class="wrapper accel">
        <div class="plot_control">
            <div class="title">Accelerometer - g</div>
            <dl>
                <dt i18n="sensorsRefresh"></dt>
                <dd class="rate">
                    <select name="accel_refresh_rate">
                        <option value="10">10 ms</option>
                        <option value="20">20 ms</option>
                        <option value="30">30 ms</option>
                        <option value="40">40 ms</option>
                        <option value="50" selected="selected">50 ms</option>
                        <option value="100">100 ms</option>
                        <option value="250">250 ms</option>
                        <option value="500">500 ms</option>
                        <option value="1000">1000 ms</option>
                    </select>
                </dd>
                <dt i18n="sensorsScale"></dt>
                <dd class="scale">
                    <select name="accel_scale">
                        <option value="0.5">0.5</option>
                        <option value="1">1</option>
                        <option value="2" selected="selected">2</option>
                    </select>
                </dd>
                <dt>X:</dt><dd class="x">0</dd>
                <dt>Y:</dt><dd class="y">0</dd>
                <dt>Z:</dt><dd class="z">0</dd>
            </dl>
        </div>
        <svg id="accel">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
        <div class="clear-both"></div>
    </div>
    <div class="wrapper mag">
        <div class="plot_control">
            <div class="title">Magnetometer - Ga</div>
            <dl>
                <dt i18n="sensorsRefresh"></dt>
                <dd class="rate">
                    <select name="mag_refrash_rate">
                        <option value="10">10 ms</option>
                        <option value="20">20 ms</option>
                        <option value="30">30 ms</option>
                        <option value="40">40 ms</option>
                        <option value="50" selected="selected">50 ms</option>
                        <option value="100">100 ms</option>
                        <option value="250">250 ms</option>
                        <option value="500">500 ms</option>
                        <option value="1000">1000 ms</option>
                    </select>
                </dd>
                <dt i18n="sensorsScale"></dt>
                <dd class="scale">
                    <select name="mag_scale">
                        <option value="0.5">0.5</option>
                        <option value="1" selected="selected">1</option>
                    </select>
                </dd>
                <dt>X:</dt><dd class="x">0</dd>
                <dt>Y:</dt><dd class="y">0</dd>
                <dt>Z:</dt><dd class="z">0</dd>
            </dl>
        </div>
        <svg id="mag">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
        <div class="clear-both"></div>
    </div>
    <div class="wrapper baro">
        <div class="plot_control">
            <div class="title">Barometer - meters</div>
            <dl>
                <dt i18n="sensorsRefresh"></dt>
                <dd class="rate">
                    <select name="baro_refresh_rate">
                        <option value="10">10 ms</option>
                        <option value="20">20 ms</option>
                        <option value="30">30 ms</option>
                        <option value="40">40 ms</option>
                        <option value="50">50 ms</option>
                        <option value="100" selected="selected">100 ms</option>
                        <option value="250">250 ms</option>
                        <option value="500">500 ms</option>
                        <option value="1000">1000 ms</option>
                    </select>
                </dd>
                <dt>X:</dt><dd class="x">0</dd>
            </dl>
        </div>
        <svg id="baro">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
        <div class="clear-both"></div>
    </div>
    <div class="wrapper debug">
        <div class="plot_control">
            <div class="title">Debug 1</div>
            <dl>
                <dt i18n="sensorsRefresh"></dt>
                <dd class="rate">
                    <select name="debug_refresh_rate">
                        <option value="10">10 ms</option>
                        <option value="20">20 ms</option>
                        <option value="30">30 ms</option>
                        <option value="40">40 ms</option>
                        <option value="50">50 ms</option>
                        <option value="100">100 ms</option>
                        <option value="250">250 ms</option>
                        <option value="500" selected="selected">500 ms</option>
                        <option value="1000">1000 ms</option>
                    </select>
                </dd>
                <dt>X:</dt><dd class="x">0</dd>
            </dl>
        </div>
        <svg id="debug1">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
        <div class="clear-both"></div>
        <div class="plot_control">
            <div class="title">Debug 2</div>
            <dl>
                <dt>X:</dt><dd class="x">blue</dd>
            </dl>
        </div>
        <svg id="debug2">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
        <div class="clear-both"></div>
        <div class="plot_control">
            <div class="title">Debug 3</div>
            <dl>
                <dt>X:</dt><dd class="x">0</dd>
            </dl>
        </div>
        <svg id="debug3">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
        <div class="clear-both"></div>
        <div class="plot_control">
            <div class="title">Debug 4</div>
            <dl>
                <dt>X:</dt><dd class="x">0</dd>
            </dl>
        </div>
        <svg id="debug4">
            <g class="grid x" transform="translate(40, 120)"></g>
            <g class="grid y" transform="translate(40, 10)"></g>
            <g class="data" transform="translate(41, 10)"></g>
            <g class="axis x" transform="translate(40, 120)"></g>
            <g class="axis y" transform="translate(40, 10)"></g>
        </svg>
    </div>
</div>
